<template>
  <!-- 内容 -->
  <div class="main">
    <div class="container">
      <div class="position-relative">
        <!-- 选项 -->
        <ul class="nav nav-tabs mb-3">
          <li class="nav-item">
            <router-link :to="'/profile/' + id + '/followee'"  class="nav-link position-relative"><i class="text-info">{{ userInfo.username }}</i> 关注的人</router-link>
          </li>
          <li class="nav-item">
            <router-link :to="'/profile/' + id + '/follower'"  class="nav-link position-relative active">关注 <i class="text-info">{{ userInfo.username }}</i> 的人</router-link>
          </li>
        </ul>
        <router-link :to="'/profile/' + id"  class="text-muted position-absolute rt-0">返回个人主页&gt;</router-link>
      </div>

      <!-- 粉丝列表 -->
      <ul class="list-unstyled" v-if="followers.length > 0">
        <li class="media pb-3 pt-3 mb-3 border-bottom position-relative" v-for="follower in followers" :key="follower.user.id">
          <router-link :to="'/profile/' + follower.user.id">
            <img :src="follower.user.headerUrl" class="mr-4 rounded-circle user-header" alt="用户头像" >
          </router-link>
          <div class="media-body">
            <h6 class="mt-0 mb-3">
              <span class="text-success">{{ follower.user.username }}</span>
              <span class="float-right text-muted font-size-12">关注于 <i>{{ follower.followTime }}</i></span>
            </h6>
            <div>
              <button type="button" class="btn btn-info btn-sm float-right follow-btn" v-if="userId != follower.user.id && !follower.followed" @click="follow(follower.user.id)">
                关注TA
              </button>
              <button type="button" class="btn btn-secondary btn-sm float-right follow-btn" v-if="userId != follower.user.id && follower.followed" @click="unfollow(follower.user.id)">
                已关注
              </button>
            </div>
          </div>
        </li>
      </ul>
      <!-- 分页 -->
      <div class="mt-5" v-if="followers.length > 0">
        <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import User from '@/api/user'
import Follow from '@/api/follow'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

const userId = ref(0)

const route = useRoute()

const id = ref(0)

const userInfo = ref({})

const followers = ref([])

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const total = ref(10)
const pageSizes = ref([10, 20, 50, 100])
const currentPage = ref(1)
const pageSize = ref(10)

onMounted(async () => {
  // 用户id
  id.value = route.params.id
  // 当前用户id
  userId.value = userStore.id
  // 用户信息
  getUserInfo()
  // 粉丝数量
  getFollowerCount()
  // 粉丝
  getFollowers()
})

const getUserInfo = async () => {
  User.getUserInfo(id.value).then(res => {
    userInfo.value = res
  })
}

const getFollowers = async () => {
  Follow.getFollowers(id.value, currentPage.value, pageSize.value).then(res => {
    followers.value = res
  })
}

const getFollowerCount = async () => {
  Follow.getFollowerCount(3, id.value).then(res => {
    total.value = res
  })
}

const follow = async (userId) => {
  Follow.follow(3, userId).then(() => {
    getFollowers()
  })
}

const unfollow = async (userId) => {
  Follow.unfollow(3, userId).then(() => {
    getFollowers()
  })
}

const handleSizeChange = async () => {
  getFollowers()
}

const handleCurrentChange = async () => {
  getFollowers()
}

</script>
